<template>
	<div ref="echartsRef" class="content-box"></div>
</template>
<script setup lang="ts">
import { ref, nextTick, watch, onMounted } from "vue";
import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";
// import { dataWrap } from "@/utils/util";
const props = defineProps({
	seriesList: {
		type: Array<Object>,
		required: true,
		default: () => {
			return [];
		}
	},
	xList: {
		type: Array<String>,
		required: true,
		default: () => {
			return ["其他"];
		}
	},
	colorIndex: {
		type: Number,
		required: true,
		default: 0
	},
	colors: {
		type: Array<any>,
		required: true,
		default: () => {
			return [];
		}
	}
});
watch(
	() => [props.seriesList],
	(now, old) => {
		console.log(now, old);
		console.log(props.seriesList);
		console.log(props.colors);
		nextTick(() => {
			chartsView();
		});
	}
);
const colorList = ["#0075FF", "#00D1FF", "#FF5D5D", "#FFB443", "#FFF736", "#B1FF81", "#5AFF7F", "#00FFBB", "#A25EFF", "#FF8743"];
const echartsRef = ref<HTMLElement>();
const chartsView = () => {
	let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
	let option: echarts.EChartsCoreOption = {
		color: props.colors,
		tooltip: {
			show: true,
			axisPointer: {
				type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
			},
			trigger: "axis",
			backgroundColor: "rgba(0, 0, 0, 1)",
			borderColor: "rgba(0, 0, 0, 1)",
			padding: [16, 24],
			textStyle: {
				color: "#fff"
			},
			formatter: (params: any) => {
				// console.log(params); // 打印数据
				let ele: string = ``;
				ele += `<div style="font-size:16px;margin-bottom:5px;">${params[0].name}</div>`;
				for (let i = 0; i < params.length; i++) {
					if (params[i].data > 0) {
						ele += `<div style="display:flex;align-items: center;height:30px;font-size:12px;"><div style="width: 8px;height: 8px;background: ${colorList[i]};border-radius: 50%;margin-right: 10px;"></div>${params[i].seriesName}<div style="font-size:20px;font-weight:bold;color:${colorList[i]};margin:0 0px 0 10px;">${params[i].data}</div>人</div>`;
					}
				}
				return ele;
			}
		},
		legend: {
			show: false
		},
		grid: {
			containLabel: true,
			x: 30,
			y: 10,
			x2: 30,
			y2: 20
		},
		xAxis: {
			type: "value",
			splitLine: {
				//分割线配置
				show: true,
				lineStyle: {
					color: "rgba(64, 94, 134, .3)",
					width: 1
				}
			}
		},
		yAxis: {
			type: "category",
			data: props.xList,
			axisTick: {
				show: false // 不显示坐标轴刻度线
			},
			axisLine: {
				lineStyle: {
					type: "solid",
					color: "rgb(64, 94, 134)",
					width: "1"
				}
			},
			axisLabel: {
				// formatter: (params: any) => {
				// 	return dataWrap(params, 3);
				// },
				textStyle: {
					color: "#ADB9C7",
					fontSize: 11
				}
			}
		},
		series: props.seriesList
	};
	useEcharts(myChart, option);
};
onMounted(() => {
	nextTick(() => {
		chartsView();
	});
});
</script>
<style scoped lang="less"></style>
